<!DOCTYPE html>
<html lang="en" xml:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/custom.form.css">
    <script src="/layui/layui.js"></script>
    <script src="/js/core.util.js"></script>
</head>
<body>
    <div class="role_table_div">

        <table class="layui-hide" id="role_table" lay-filter="role_table">
            <div id="searchParam">
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="text" id="roleId" class="layui-input" autocomplete="off" placeholder="请输入角色ID">
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" id="roleName" class="layui-input" autocomplete="off" placeholder="请输入角色名称">
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="createTime" placeholder="创建时间">
                    </div>
                    <div class="layui-input-inline layui-form">
                        <select id="status" >
                            <option value="">请选择角色状态</option>
                            <option value="1">正常</option>
                            <option value="0">弃用</option>
                        </select>
                    </div>
                    <div class="layui-input-inline ">
                        <button class="layui-btn-normal layui-btn" id="search"><i class="layui-icon">&#xe615;</i>查询</button>
                    </div>
                </div>
            </div>
        </table>
        <div id="laypage" class="layui-laypage-btn"></div>
    </div>

    <div class="panel panel-default operation_role" hidden>
        <div class="panel-heading title"></div>
        <div class="layui-card-body">
            <form class="layui-form " action="" lay-filter="deptInfo" style="width: 700px;margin-top: 10px">
                <input name="id" hidden/>
                <input name="pid" hidden/>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-block">
                        <input type="name" name="name" placeholder="请输入角色名称" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label ">备注</div>
                    <div class="layui-input-block">
                        <input type="description" name="description" placeholder="请输入备注信息"
                               autocomplete="off" class="layui-input" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="status" lay-skin="switch" lay-filter="switch" lay-text="启用|禁用" checked>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">请选择权限</label>
                </div>
                <div class="layui-form-item">
                    <div class="layui-tree">
                        <div id="permissionTree"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存
                        </button>
                        <button class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>

    <script>
        layui.use(['jquery','form','table','laypage', 'layer','laydate','tree'],function () {
            var table = layui.table;
            var laypage = layui.laypage
            var form = layui.form;
            var layer = layui.layer;
            var $ =layui.jquery;
            var tree=layui.tree;
            var laydate=layui.laydate;
            var searchParam= {
                pageNum:1,
                pageSize:10
            }
            /*动态获取数据*/
            CoreUtil.sendAjax("/api/roles",JSON.stringify(searchParam),function (res) {
                //初始化分页器
                laypageTable(res.data.totalRows,searchParam.pageNum);
                //初始化渲染数据
                if(res.data.list !=null){
                    loadTable(res.data.list);
                }
            },"POST",false);
            //初始化菜单权限树
            var initTree=function () {
                CoreUtil.sendAjax("/api/permission/tree/all",null,function (res) {
                    loadPermissionTree(res.data);
                },"GET",false)};
            //加载权限树数据
            var loadPermissionTree=function (data) {
                //仅节点左侧图标控制收缩
                tree.render({
                    elem: '#permissionTree'
                    , data: data
                    , onlyIconControl: true //是否仅允许节点左侧图标控制展开收缩
                    , showCheckbox: true //是否显示复选框
                    , id: 'permissionIds'
                    , accordion: false
                    , click: function (obj) {
                        layer.msg(JSON.stringify(obj.data.title));
                    }
                });
            };

            var laypageTable = function(count,currentPage) {
                laypage.render({
                    elem: 'laypage'
                    ,count: count
                    ,limit:searchParam.pageSize
                    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                    ,curr: location.hash.replace('#!currentPage=', '') //获取起始页
                    ,hash: 'currentPage' //自定义hash值
                    ,jump: function (obj,first) {
                        if (!first){
                            searchParam.pageNum=obj.curr;
                            searchParam.pageSize=obj.limit;
                            CoreUtil.sendAjax("/api/roles",JSON.stringify(searchParam),function (res) {
                                if(res.data.list !=null){
                                    loadTable(res.data.list);
                                    laypageTable(res.data.totalRows,searchParam.pageNum);
                                }
                            },"POST",false);
                        }
                    }
                });
            };

            var loadTable=function (data) {
                //展示已知数据
                table.render({
                    elem: '#role_table'
                    ,cols: [
                        [
                            {type: 'checkbox', fixed: 'left'},
                            {field: 'id', title: 'ID', width: 300, sort: true},
                            {field: 'name', title: '角色名称', width: 200},
                            {
                                field: 'createTime', title: '创建时间', minWidth: 120 , templet: function (item) {
                                    return CoreUtil.formattime(item.createTime);
                                }
                            },
                            {
                                field: 'updateTime', title: '更新时间', minWidth: 120,templet: function(item) {
                                    return CoreUtil.formattime(item.updateTime);
                                }
                            },
                            {
                                field: 'status', title: '状态', width: 100,templet: function (item) {
                                    if(item.status === 1){
                                        return ' <input type="checkbox" lay-skin="switch" lay-text="正常|弃用" checked disabled>';
                                    }
                                    if(item.status === 0){
                                        return ' <input type="checkbox" lay-skin="switch" lay-text="正常|弃用" disabled>';
                                    }
                                }
                            },
                            {field: 'description', title: '描述', width: 300},
                            {title:'操作',width:250,toolbar:'#tool'}
                        ]
                    ] ,
                    data: data
                    ,even: true
                    ,limit: data.length
                   // ,limits: [10, 20, 30, 40, 50]
                    ,toolbar:'#toolbar'
                });
            };

            //新增角色事件
            table.on('toolbar(role_table)',function (obj) {
                switch (obj.event) {
                    case 'addNewRole':
                        //隐藏表格
                        $(".role_table_div").hide();
                        //显示编辑窗口
                        $(".operation_role").show();
                        $(".title").html("新增角色");
                        $(".operation_role input[name=id]").val("");
                        $(".operation_role input[name=pid]").val("");
                        $(".operation_role input[name=name]").val("");
                        $(".operation_role input[name=description]").val("");
                        $(".operation_role input[name=status]").attr('checked', 'checked');
                        $(".operation_role input[name=status]").attr('type', 'hidden').val(1);
                        var x = document.getElementsByClassName("layui-unselect layui-form-switch");
                        x[0].setAttribute("class", "layui-unselect layui-form-switch layui-form-onswitch");
                        var d = document.getElementsByTagName('em')[0];
                        d.firstChild.nodeValue = '启用';
                        form.render(); //更新全部
                        initTree();
                        break;
                }
            })

            //编辑或新增的界面取消事件
            $("#btn_cancel").click(function() {
                //显示表格
                $(".role_table_div").show();
                //隐藏编辑窗口
                $(".operation_role").hide();
                //可以防止在表单事件操作后自动刷新
                return false;
            });

            //监听提交
            form.on('submit(submit)', function(data){
                var permissionIds=[];
                var brchArrays = tree.getChecked('permissionIds');
                var params={
                    id:data.field.id,
                    name:data.field.name,
                    description:data.field.description,
                    status:data.field.status,
                    permissionIds:getPermissionIds(brchArrays,permissionIds)
                };
                //新增
                if(data.field.id===undefined || data.field.id===null || data.field.id===""){
                    CoreUtil.sendAjax("/api/role",JSON.stringify(params),function (res) {
                        //显示表格
                        $(".role_table_div").show();
                        //隐藏编辑窗口
                        $(".operation_role").hide();
                        $(".layui-laypage-btn").click();
                    },"POST",false);
                }
                return false;
            });
            //递归遍历获取id
            function getPermissionIds(jsonObj,permissionIds) {
                if(jsonObj==undefined||jsonObj==null||!jsonObj instanceof Object){
                    return null;
                }
                for(var i=0;i<jsonObj.length;i++){
                    permissionIds.push(jsonObj[i].id);
                    getPermissionIds(jsonObj[i].children,permissionIds);
                }
                return permissionIds;
            }
            //修改查询条件数据封装
            var searchParam= {
                roleId:null,
                roleName:null,
                status:null,
                startTime:null,
                endTime:null,
                pageNum:1,
                pageSize:10
            };
            //日期范围
            laydate.render({
                elem: '#createTime'
                ,type: 'datetime'
                ,range: '~'
                ,done: function(value, date, endDate){
                    if(value !=null && value != undefined && value != ""){
                        searchParam.startTime=value.split("~")[0];
                        searchParam.endTime=value.split("~")[1];
                    }else {
                        //清空时间的时候要清空以前选择的日期
                        searchParam.startTime=null;
                        searchParam.endTime=null;
                    }
                }
            });

            //执行查询
            $("#search").click(function () {
                searchParam.roleId=$("#roleId").val();
                searchParam.status=$("#status").val();
                searchParam.roleName=$("#roleName").val();
                searchParam.pageNum=1;
                CoreUtil.sendAjax("/api/roles",JSON.stringify(searchParam),function (res) {
                    //初始化分页器
                    laypageTable(res.data.totalRows,searchParam.pageNum);
                    //初始化渲染数据
                    if(res.data.list !=null){
                        loadTable(res.data.list);
                    }
                },"POST",false);
            });

            //操作项事件
            table.on('tool(role_table)',function (obj) {
                var data = obj.data;
                switch (obj.event) {
                    case 'edit':
                        $(".role_table_div").hide();
                    //显示编辑窗口
                        $(".operation_role").show();
                        $(".title").html("编辑角色");
                        layer.msg('你选择了'+data.name);
                        break;
                }
            });
        });
    </script>

    <script type="text/html" id="toolbar">
        <div class="layui-btn-group">
            <button type="button" class="layui-btn" lay-event="addNewRole">
                <i class="layui-icon">&#xe608;</i> 新增角色
            </button>
        </div>
    </script>
<script type="text/html" id="tool">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>
</html>